<template>
  <div>
    <el-button class="abtn" type="primary" @click="dialogFormVisible=true;formData={}">添加</el-button>
    <el-table :data="list" border style="width: 100%">
      <el-table-column fixed prop="pid" label="商品编号" />
      <el-table-column fixed prop="pname" label="商品名称" />
      <el-table-column fixed prop="picture" label="图片" />
      <el-table-column fixed prop="unitprice" label="售价" />
      <el-table-column fixed prop="content" label="简介" />
      <el-table-column fixed prop="tid" label="商品类型"/>
      <el-table-column fixed prop="place" label="产地"/>
      <el-table-column fixed prop="addtime" label="上架时间"/>
      <el-table-column fixed prop="finishtime" label="下架时间"/>
      <el-table-column fixed prop="nutrients" label="营养成分"/>
      <el-table-column fixed prop="brand" label="水果品牌"/>
      <el-table-column fixed prop="sid" label="水果库存"/>
      <el-table-column fixed prop="vid" label="水果品种"/>
      <el-table-column fixed="right" label="操作" width="150">
        <template slot-scope="scope">
          <el-button type="text" size="small" icon="el-icon-edit" @click="editInfo(scope.row)">编辑</el-button>
          <el-button type="text" size="small" icon="el-icon-delete" class="red" @click="remove(scope.row.pid)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog :title="title" :visible.sync="dialogFormVisible">
      <el-form :model="formData">
        <el-form-item label="商品编号" :label-width="formLabelWidth" >
          <el-input v-model="formData.pid" :disabled="true"/>
        </el-form-item>
        <el-form-item label="商品名称" :label-width="formLabelWidth">
          <el-input v-model="formData.pname"/>
        </el-form-item>
        <el-form-item label="图片" :label-width="formLabelWidth">
          <el-input v-model="formData.picture"/>
        </el-form-item>
        <el-form-item label="售价" :label-width="formLabelWidth">
          <el-input v-model="formData.unitprice" show-password/>
        </el-form-item>
        <el-form-item label="简介" :label-width="formLabelWidth">
          <el-input v-model="formData.content"/>
        </el-form-item>
        <el-form-item label="商品类型" :label-width="formLabelWidth">
          <el-input v-model="formData.tid"/>
        </el-form-item>
        <el-form-item label="产地" :label-width="formLabelWidth">
          <el-input v-model="formData.place"/>
        </el-form-item>
        <el-form-item label="上架时间" :label-width="formLabelWidth">
          <div class="block">
            <el-date-picker v-model="formData.addtime" type="date" placeholder="选择上架时间"/>
          </div>
        </el-form-item>
        <el-form-item label="下架时间" :label-width="formLabelWidth">
          <div class="block">
            <el-date-picker v-model="formData.finishtime" type="date" placeholder="选择下架时间"/>
          </div>
        </el-form-item>
        <el-form-item label="营养成分" :label-width="formLabelWidth">
          <el-input v-model="formData.nutrients"/>
        </el-form-item>
        <el-form-item label="水果品牌" :label-width="formLabelWidth">
          <el-input v-model="formData.brand"/>
        </el-form-item>
        <el-form-item label="水果库存" :label-width="formLabelWidth">
          <el-input v-model="formData.sid"/>
        </el-form-item>
        <el-form-item label="水果品种" :label-width="formLabelWidth">
          <el-input v-model="formData.vid"/>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submits()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'Product',
  data () {
    return {
      list: [],
      title: '添加商品',
      dialogFormVisible: false,
      formLabelWidth: '120px',
      formData: {}
    }
  },
  created () {
    this.getList()
  },
  methods: {
    getList () {
      this.$http.get('http://localhost:8081/product/list').then(data => {
        this.list = data
      })
    },
    remove (pid) {
      alert(pid)
      this.$http.get(`http://localhost:8081/product/remove?pid=${pid}`).then(data => {
        console.log(data)
        if (data === true) {
          this.$message.success('删除成功')
          this.getList()
        } else {
          this.$message.error('删除失败')
        }
      })
    },
    editInfo (rowInfo) {
      this.dialogFormVisible = true
      this.formData = rowInfo
      this.title = '修改信息'
    },
    submits () {
      if (this.formData.pid === undefined) {
        this.$http.get('http://localhost:8081/product/save', {params: this.formData}).then(data => {
          console.log(data)
          if (data === true) {
            this.$message.success('添加成功')
            this.getList()
            this.dialogFormVisible = false
          } else {
            this.$message.error('添加失败')
            this.dialogFormVisible = false
          }
        })
      } else {
        this.$http.get('http://localhost:8081/product/update', {params: this.formData}).then(data => {
          console.log(data)
          if (data === true) {
            this.$message.success('修改成功')
            this.getList()
            this.dialogFormVisible = false
          } else {
            this.$message.error('修改失败')
            this.dialogFormVisible = false
          }
        })
      }
    }
  }
}
</script>

<style scoped>
.abtn{
  float: left;
}
.red {
  color: #ff0000;
}
</style>
